<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018/2/1
  Time: 17:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="common/tag.jsp"%>
<html>
<head>
    <%@include file="common/head.jsp" %>
    <meta charset="utf-8">
</head>
    <body>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <h3><span class="label label-primary">当前规则</span></h3>
    <label>&nbsp;&nbsp;源Ip:${rule.src_ip}&nbsp;&nbsp;</label>
    <label>源端口:${rule.src_port}&nbsp;&nbsp;  </label>
    <label>目的Ip:${rule.dst_ip}&nbsp;&nbsp;  </label>
    <label>目的端口:${rule.dst_port}&nbsp;&nbsp;  </label>
    <div id="excelErrorDiv">
    <span id="loading"  style="text-align: center;display:block;font-size:50px;" >加载中<dot>...</dot></span>
    </div>
<div id="main" style="width: 600px;height:400px;"></div>
<form action="<c:url value='${ctx}/ipSort/ipTrend'/>" method="post" id="form">
    <input type="hidden" id="ruleId" name="ruleId" value="${ruleId}">
    <input type="hidden" id="ipType" name="ipType" value="${ipType}">
    <input type="hidden"  name="srcDstIp" id="srcDstIp" >
</form>


<!-- 下面的script脚本，其实也可以写成一个js，然后引入近来，但这里就不这样做了 -->
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例，
    // 这句和最后一句，都是必须的。只是中间部分改变了。根据官网教程来的
    var myChart = echarts.init(document.getElementById('main'));


    // 显示正在加载
    function showLoad(){
        var loading = document.getElementById('#loading');
        $("#excelErrorDiv").show();
//        loading.style.display = 'block';
//        ('#loading').show();
    }
    // 隐藏正在加载
    function hideLoad(){
        var loading = document.getElementById('#loading');
        $("#excelErrorDiv").hide();
//        loading.style.display = 'none';
//        ('#loading').show();
    }


    chushihua(myChart);
    //每隔3秒执行一次timelyFun方法
    window.setInterval("chushihua(myChart)",3000);
    function chushihua(myChart) {
        var params = {};
        params.ruleId = ${ruleId} ;
        $.ajax({
            contentType : "application/json",
            type : "GET",
            url : "/rule/chinaMapInfo",
            data: params ,
            dataType : "json",
            success : function(data) {
                var BJDataInfo1=[];
                var chinaMapList=data.chinaMapList;
                var geocoordMap=data.geocoordMap;
                var ipType = ${ipType};
//                if(BJDataInfo1!=null){
//                    hideLoad();
//                }
                if(chinaMapList==null){
                    showLoad();
                    return;
                }else{
                    hideLoad();
                }
                for(var i=0;i<chinaMapList.length;i++){
                    var single=new Object();
                    var double=new Object();
                    var BJDataInfo2=new Array();
                    single.name=chinaMapList[i].name;
                    single.value=chinaMapList[i].value;
                    double.name=chinaMapList[i].name1;
                    double.value=chinaMapList[i].value1;
                    BJDataInfo2[0]=single;
                    BJDataInfo2[1]=double;
                    BJDataInfo1[i]=BJDataInfo2;
                }
                var geoCoordMap = geocoordMap ;
                var BJData = BJDataInfo1;
                var SHData = BJData;
                var GZData = BJData;
                //飞机形状
                var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

                var convertData = function (data) {
                    var res = [];
                    for (var i = 0; i < data.length; i++) {
                        var dataItem = data[i];
                        var fromCoord = geoCoordMap[dataItem[0].name];
                        var toCoord = geoCoordMap[dataItem[1].name];
                        if (fromCoord && toCoord) {
                            res.push({
                                fromName: dataItem[0].name,
                                toName: dataItem[1].name,
                                coords: [fromCoord, toCoord]
                            });
                        }
                    }
                    return res;
                };

                var color = ['#a6c84c', '#ffa022', '#46bee9'];
                var series = [];
                [['保定', BJData], ['上海', SHData], ['广州', GZData]].forEach(function (item, i) {
                    series.push({
                                name: item[0] + ' Top10',
                                type: 'lines',
                                zlevel: 1,
                                effect: {
                                    show: true,
                                    period: 6,
                                    trailLength: 0.7,
                                    color: '#fff',
                                    symbolSize: 3
                                },
                                lineStyle: {
                                    normal: {
                                        color: color[i],
                                        width: 0,
                                        curveness: 0.2
                                    }
                                },
                                data: convertData(item[1])
                            },
                            {
                                name: item[0] + ' Top10',
                                type: 'lines',
                                zlevel: 2,
                                symbol: ['none', 'arrow'],
                                symbolSize: 10,
                                effect: {
                                    show: true,
                                    period: 6,
                                    trailLength: 0,
                                    symbol: planePath,
                                    symbolSize: 15
                                },
                                lineStyle: {
                                    normal: {
                                        color: color[i],
                                        width: 1,
                                        opacity: 0.6,
                                        curveness: 0.2
                                    }
                                },
                                data: convertData(item[1])
                            },
                            {
                                name: item[0] + ' Top10',
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                zlevel: 2,
                                rippleEffect: {
                                    brushType: 'stroke'
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'right',
                                        formatter: '{b}'
                                    }
                                },
                                symbolSize: function (val) {
                                    return val[2] / 8;
                                },
                                itemStyle: {
                                    normal: {
                                        color: color[i]
                                    }
                                },
                                data: item[1].map(function (dataItem) {
                                    return {
                                        name: dataItem[ipType].name,
                                        value: geoCoordMap[dataItem[ipType].name].concat([dataItem[ipType].value])
                                    };
                                })
                            });
                });
                option = {
                    backgroundColor: '#404a59',
                    title: {
                        text: '流量分布',
                        subtext: '',
                        left: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        top: 'bottom',
                        left: 'right',
                        data: [],
                        textStyle: {
                            color: '#fff'
                        },
                        selectedMode: 'single'
                    },
                    geo: {
                        map: 'china',
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: '#323c48',
                                borderColor: '#404a59'
                            },
                            emphasis: {
                                areaColor: '#2a333d'
                            }
                        }
                    },
                    series: series
                };

                myChart.setOption(option);
            }
        });
    }
    myChart.on('click', function (params) {
        if(params.data.name){
            $("#srcDstIp").val(params.data.name); //设置
            $('#form').submit();
        }
    });
</script>

</body>
</html>
